<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>填报志愿系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            padding: 20px;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 800px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
        }
        label {
            font-weight: bold;
        }
        select, input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
    <script>
        // 动态更新导师下拉框
        function updateMentors(researchId) {
            // 清空现有的导师下拉框
            document.querySelectorAll(".mentor-select").forEach(function (select) {
                select.innerHTML = "<option>加载中...</option>";
            });

            // 使用 AJAX 获取导师信息
            const xhr = new XMLHttpRequest();
            xhr.open("POST", "getMentors", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const mentors = JSON.parse(xhr.responseText); // 返回的导师数据
                    document.querySelectorAll(".mentor-select").forEach(function (select) {
                        select.innerHTML = "";
                        mentors.forEach(function (mentor) {
                            const option = document.createElement("option");
                            option.value = mentor.mentorId;
                            option.textContent = mentor.mentorName;
                            select.appendChild(option);
                        });
                    });
                }
            };
            xhr.send("researchId=" + researchId);
        }
    </script>
</head>
<body>
<div class="container">
    <h1>填报志愿系统</h1>

    <!-- 显示考生基本信息 -->
    <div>
        <label>考生ID：</label> ${studentAdmissionInfo.studentId} <br>
        <label>考生姓名：</label> ${studentAdmissionInfo.name} <br>
        <label>二级学科ID：</label> ${studentAdmissionInfo.admittedSecondaryDisciplineId} <br>
        <label>二级学科名称：</label> ${studentAdmissionInfo.admittedSecondaryDisciplineName} <br>
    </div>

    <!-- 研究方向选择 -->
    <form action="volunteerSubmit" method="post">
        <input type="hidden" name="studentId" value="${studentAdmissionInfo.studentId}">
        <label for="researchDirection">请选择研究方向：</label>
        <select id="researchDirection" name="researchId" onchange="updateMentors(this.value)" required>
            <c:forEach var="direction" items="${researchDirections}">
                <option value="${direction.researchId}">${direction.researchDirection}</option>
            </c:forEach>
        </select>

        <!-- 志愿导师选择 -->
        <div>
            <label>志愿1导师ID：</label>
            <select name="mentorId1" class="mentor-select" required></select>

            <label>志愿2导师ID：</label>
            <select name="mentorId2" class="mentor-select"></select>

            <label>志愿3导师ID：</label>
            <select name="mentorId3" class="mentor-select"></select>
        </div>

        <!-- 提交按钮 -->
        <button type="submit">提交志愿</button>
    </form>
</div>
</body>
</html>

